<!-- 收藏 -->
<template>
	<view>
		<view style="border-bottom:1rpx solid #f0f0f0;">
			<fui-tabs :tabs="pageTabs" :current="tabIndex" isSlider selectedColor="#000" sliderBackground="#FFDD00"
				@change="changeTabs"></fui-tabs>
		</view>
		<view>
			<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{height:bodyHeight+'px'}">
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:bodyHeight+'px'}">


						<index-notice :NoticeList="MyNoticeFav" v-if="MyNoticeFav.length != 0"></index-notice>

						<view class="row-center marginTop-50" v-else>
							<view>
								<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
								<view class="text-align-center">暂无通告收藏</view>
							</view>
						</view>

					</scroll-view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height: bodyHeight + 'px'}">
						<index-reservationorder v-if="MyReservationOrderFav.length != 0"
							:ReservationOrderList="MyReservationOrderFav"></index-reservationorder>
						<view class="row-center marginTop-50" v-else>
							<view>
								<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
								<view class="text-align-center">暂无约单收藏</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import IndexNotice from "@/pages/index/component/index-notice.vue";
	import IndexReservationorder from "@/pages/index/component/index-reservationorder.vue";
	export default {
		components: {
			IndexNotice,
			IndexReservationorder
		},
		data() {
			return {
				pageTabs: [{
						name: '通告',
						value: 0
					},
					{
						name: '约单',
						value: 1
					}
				],
				tabIndex: 0,
				bodyHeight: 1000,
				MyNoticeFav: [],
				MyReservationOrderFav: []
			};
		},
		onLoad() {
			let time = 80
			// #ifdef H5
			time = 200
			// #endif
			setTimeout(() => {
				this.bodyHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(200);
				// #ifdef MP
				// #endif
			}, time)

			this.loadData();
		},
		methods: {
			loadData() {
				this.$httpost('/UserCenter/myFav', {}).then(res => {
					// console.log('收藏接口返回数据', res)
					if (res.code == 200) {
						this.MyNoticeFav = res.data.MyNoticeFav
						this.MyReservationOrderFav = res.data.MyReservationOrderFav;
					}
				});
			},
			changeTabs(e) {
				this.switchTab(e.index)
			},
			tabChange(e) {
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
		}
	}
</script>

<style lang="scss">
	.artistes {
		padding: 10rpx
	}

	.artistesBox {
		margin-top: 10rpx;
		height: auto;
		background-color: #FFF;
		border-radius: 15rpx;
		padding: 26rpx;
		padding-bottom: 40rpx;
	}

	.artInfos {
		// display: flex;
		// justify-content: space-between;
		height: 60rpx;
	}

	.artHeadPic {
		position: relative;
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 60vw;
		margin-left: 20rpx;
	}

	.artName {
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.artLabel {
		// display: flex;
		margin-top: 10rpx;
		font-size: 20rpx;
		color: #999;
		white-space: nowrap;
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.artState {
		width: 120rpx;
		float: right;
		text-align: right;
		color: #999
	}

	.geline {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.artAddr {}
</style>